<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>tl-ops-manage后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="../lib/axios.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/layui/layui.js" v="layui" e="layui"></script>
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/admin.css" />

</head>

<style>
    .layuiadmin-big-font{
        font-size: 28px !important; 
        color: #c27439 !important;
    }
    .layui-layer {
        transition: all 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;
    }

    .layui-layer-page .layui-layer-content {
        background: #ededed;
    }

    .layuiadmin-span-color,
    .layuiadmin-big-font {
        font-weight: bold;
    }

    .layui-table {
        word-break: break-all;
        box-shadow: 10px 3px 15px 3px rgb(0 0 0 / 5%);
    }

    .room-recent-title {
        margin-left: 10px;
        margin-top: 10px;
        font-weight: bold;
        font-size: 17px;
    }

    .room-status-svg {
        width: 15px;
        height: 15px;
        top: 2px;
        position: relative;
    }

    .layui-layer .layui-layer-page .layui-layer-tab {
        box-sizing: content-box;
    }

    .layui-layer-tab .layui-layer-title span {
        min-width: unset;
        max-width: unset;
    }

    .layui-layer-tab .layui-layer-title {
        display: inline-flex;
        width: 100%;
        padding: 0;
    }
</style>

<body>

    <div class="layui-fluid" id="tl-ops-web-console-balance-count-view"> </div>

    <script id="tl-ops-web-console-balance-count-tpl" type="text/html">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        API规则负载次数
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">今天</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font">{{d.balance_api_count_today}}次</p>
                        <p>
                            总计次数
                            <span class="layuiadmin-span-color">{{d.balance_api_count_all}}次</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        Body规则负载次数
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">今天</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
    
                        <p class="layuiadmin-big-font">{{d.balance_body_count_today}}次</p>
                        <p>
                            总计次数
                            <span class="layuiadmin-span-color"> {{d.balance_body_count_all}}次 </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        Cookie规则负载次数
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">今天</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
    
                        <p class="layuiadmin-big-font">{{d.balance_cookie_count_today}}次</p>
                        <p>
                            总计次数
                            <span class="layuiadmin-span-color"> {{d.balance_cookie_count_all}}次 </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        Header规则负载次数
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">今天</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
    
                        <p class="layuiadmin-big-font">{{d.balance_header_count_today}}次</p>
                        <p>
                            总计次数
                            <span class="layuiadmin-span-color"> {{d.balance_header_count_all}}次 </span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        Param规则负载次数
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">今天</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
    
                        <p class="layuiadmin-big-font">{{d.balance_param_count_today}}次</p>
                        <p>
                            总计次数
                            <span class="layuiadmin-span-color"> {{d.balance_param_count_all}}次 </span>
                        </p>
                    </div>
                </div>
            </div>
    
            {{#  layui.each(d.balance_count_list, function(index, balance_count){ }}
            <div class="layui-col-sm12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm12">
                        <div class="room-recent-title">{{balance_count.name}}</div>
                        {{#  if(balance_count.list.length === 0) { }}
                        <div style="text-align: center; font-weight: 800; color: brown; display: grid;">
                            <svg style="width: 100%;" viewBox="0 0 1024 1024" p-id="4310" width="128" height="128">
                                <path d="M106.97251697 619.07623114h289.80414734c11.63872078 0 21.53163343 9.89291266 21.53163343 21.53163345 0 51.21037142 40.73552271 91.3639581 92.52783018 91.3639581s92.52783017-40.15358668 92.52783018-91.3639581c0-11.63872078 9.89291266-21.53163343 21.53163344-21.53163345h288.05833923c8.72904058 0 16.29420908 5.23742435 19.78582532 12.80259287-4.65548831-15.71227305-12.80259285-32.00648214-13.96646493-34.3342263 0-0.58193603-0.58193603-0.58193603-0.58193604-0.58193603l-92.52783018-146.6478818c0-0.58193603-0.58193603-0.58193603-0.58193605-1.16387207-1.74580811-1.74580811-15.71227305-19.78582532-32.00648212-29.09680195-16.87614513-9.89291266-40.15358668-11.63872078-43.06326688-11.63872078h-494.64563303c-4.07355227 0-23.8593776 0.58193603-39.57165064 9.89291266-15.71227305 9.89291266-27.35099383 26.76905779-28.5148659 28.51486591 0 0-0.58193603 0.58193603-0.58193603 1.16387208l-77.97942921 138.50077725c-2.32774415 3.49161624-9.89291266 16.87614513-16.29420909 37.82584251 4.07355227-2.9096802 8.72904058-5.23742435 14.54840098-5.23742435z" fill="#bfbfbf" p-id="4311"></path><path d="M937.3952444 670.28660257c0-1.74580811-1.16387208-16.87614513-4.07355228-31.4245461v2.32774415c0 11.63872078-9.31097662 21.53163343-21.53163344 21.53163343h-267.69057785l-2.90968021 11.05678476c-15.13033701 59.93941199-69.25038862 101.25687076-130.93560873 101.25687075-62.26715616 0-116.38720777-41.8993948-131.51754478-101.25687075l-2.9096802-11.05678476H106.39058092c-8.72904058 0-15.71227305-5.23742435-19.20388928-12.22065681-1.16387208 10.4748487-1.16387208 18.62195325-1.16387208 22.11356949v157.12273048c0 2.9096802 1.74580811 26.76905779 18.62195325 42.48133083 16.87614513 15.71227305 43.64520291 16.87614513 46.5548831 16.87614514h1.16387208-0.58193603 715.78132778c5.23742435 0 31.4245461-0.58193603 49.46456329-16.87614514 18.0400172-16.29420908 19.20388928-38.40777856 19.2038893-44.80907498l1.16387207-157.12273049zM509.0903198 348.47597308c-16.29420908 0-29.67873798-13.3845289-29.67873798-29.67873798V148.87191176c0-16.29420908 13.3845289-29.67873798 29.67873798-29.67873798s29.67873798 13.3845289 29.67873799 29.67873798v170.50725939c0 16.29420908-13.3845289 29.09680195-29.67873799 29.09680193z m198.44018926-1.16387207c-16.29420908 0-29.67873798-13.3845289-29.67873798-29.67873799 0-6.98323246 2.32774415-13.3845289 6.40129642-18.62195323l67.5045805-83.21685357c5.81936038-6.98323246 13.96646493-11.05678473 23.27744156-11.05678473 6.98323246 0 13.3845289 2.32774415 18.62195324 6.40129643 6.40129643 4.65548831 9.89291266 12.22065682 11.05678474 19.78582531 0.58193603 7.56516851-1.74580811 15.71227305-6.40129642 21.53163344l-67.50458051 83.21685356c-5.81936038 8.14710455-13.96646493 12.22065682-23.27744155 11.63872078z m-393.38876226-1.74580812c-8.72904058 0-17.45808117-4.07355227-23.27744156-11.05678474l-66.34070843-83.7987896c-9.89291266-12.80259285-8.14710455-31.4245461 4.65548831-41.89939479 5.23742435-4.07355227 11.63872078-6.40129643 18.62195325-6.40129643 9.31097662 0 17.45808117 4.07355227 23.27744155 11.05678474l66.34070843 83.79878959c9.89291266 12.80259285 8.14710455 31.4245461-4.65548831 41.8993948-5.23742435 4.07355227-12.22065682 6.40129643-18.62195324 6.40129643z" fill="#bfbfbf" p-id="4312"></path></svg>
                            <p > 当前规则暂无负载详情 </p>
                        </div>
                        {{#  } else { }}
                        <table class="layui-table">
                            <thead> <tr> <th>服务-节点</th>  <th>规则ID</th> <th>规则</th>  <th>命中次数</th> <th>统计时间</th> </tr> </thead>
                            <tbody>
                            {{#  layui.each(balance_count.list, function(index, item){ }}
                                {{#  layui.each(item.count_list, function(time, count){ }}
                                <tr >
                                    <td> <span class="layui-badge layui-bg-blue" style="background-color: #376f99 !important;">{{item.service_name}}-{{item.node_id}}</span> </td>
                                    <td>{{item.id}}</td>
                                    <td ><pre style="font-weight: bold;font-family: auto;">{{item.content}}</pre></td>
                                    <td>{{count}}</td>
                                    <td>{{time}}</td>
                                </tr>
                                {{#  }); }}
                            {{#  }); }}
                            </tbody>
                        {{#  } }}
                        </table>
                    </div>
                </div>
            </div>
            {{#  }); }}
        </div>
    </script>

    <script src="../lib/tl_ops_web_comm.js"></script>
    <script src="tl_ops_web_console_balance_count.js"></script>
    <script>
        layui.use(['table', 'form', 'laytpl', 'layer'], tl_ops_web_console_balance_count_main);
    </script>
</body>

</html>